<template>
  <div class="info">
    <h1>作品集/Profile</h1>
    <transition
      :duration="{ enter: 2500, leave: 1500 }"
      enter-active-class="animated fadeInRight">
      <div class="cont"  v-if="show">
        <el-row :gutter="20">
          <template v-for="item in profiles">
            <el-col :key="item.name" :span="12" :xs="24">
              <div class="item">
                <h2 v-text="item.name"></h2>
                <p v-text="'技术栈: ' + item.skills"></p>
                <p v-text="item.content"></p>
                <p v-text="'gitee地址: ' + item.gitee"></p>
              </div>
            </el-col>
          </template>
        </el-row>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false,
      profiles: [
        {
          name: '基于Vue的原生app开发',
          skills: 'vue vue-router vue-resource vuex mint-ui ES6 webpack git',
          content: '这是电商app核心业务的开发项目,包括用户和权限管理、商品管理、库存管理、购物车、订单等.是针对Vue进行的初入实战,涵盖了Vue开发所需技术:模板、数据绑定、声明式渲染、计算属性、事件处理、生命周期钩子函数、过度动画、指令、Vue插件、组件化开发、组件间通信、路由传递、前后端交互等.',
          gitee: 'https://gitee.com/charlotte912/vue912_0001'
        },
        {
          name: '门票订购系统',
          skills: 'nodejs express mongoDB vue vue-router mint-ui ES6 webpack git ',
          content: '本项目是一款移动端APP，基于前后端分离模式,实现用户登录,注册,门票管理,信息管理,轮播,评论,电子条码等功能.前端使用vue+webpack构建的单页面应用,采用组件化思想搭建整个项目,使组件高度复用,代码十分简洁,组件切换实现翻页动画以确保用户体验;后端采用nodejs(express框架)+mongoDB搭建服务器,通过接口对接进行数据交互,页面渲染,后台数据逻辑处理与CRUD.',
          gitee: 'https://gitee.com/charlotte912/Vue_0004'
        }
      ]
    }
  },
  methods: {
    timeout () {
      setTimeout(() => {
        this.show = true
      }, 1000)
    }
  },
  mounted () {
    this.timeout()
  }
}
</script>

<style lang="less" scoped>
@import '../less/index.less';
.info {
  .info;
  .cont {
    .cont;
    width: 90%;
    .item {
      background-color: rgba(59, 123, 13, 0.2);
      padding: 10px;
      border-radius: 15px;
      margin: 10px auto;
      @media screen and (max-width: 768px) {
        padding: 5px;
        margin: 5px auto;
      }
      &:hover {
        border-radius: 25px;
        background-color: rgba(10, 135, 87, 0.3);
      }
      p {
        text-align: left;
        text-indent: 28px;
        font-size: 1.1rem;
        line-height: 1.2;
        @media screen and (max-width: 768px) {
          text-indent: 12px;
          font-size: 0.7rem;
          line-height: 1.1;
        }
      }
    }
  }
}
</style>
